<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js表格特效制作js表格排序表格内容可筛选排序</title>
<meta name="description" content="js表格特效制作一个js表格排序筛选，点击表格标题，子内容按大小、字母先后顺序排列。内含js代码下载。" />

</head>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
/* sortTable */
.sortTable{border:#000000 2px solid;}
.sortTable td,.sortTable th{font-size:12px;font-family:Arial;padding:5px;}
.sortTable th{background:#c0c0c0}
.sortTable th a{color:#000080;text-decoration:none}
.sortTable th.sortedcolumn{background:#b0b0b0}
.sortTable tr.alternaterow{background:#e0e0e0}
.sortTable tr.alternaterow td.sortedcolumn{background:#d0d0d0}
.sortTable td.sortedcolumn{background:#f0f0f0}
</style>

<body>

<table class="sortTable">
	<thead>
		<tr>
			<th colspan="11">NFL 2001 Offensive Stats</th>
		</tr>
		<tr>
			<th>Rank</th>
			<th><a title="Team Name" onclick="this.blur(); return sortTable('offmain',1,false);" href="#">Team</a></th>
			<th><span title="Games Played">Gms</span></th>
			<th><a title="Total Yards" onclick="this.blur(); return sortTable('offmain',3,true);" href="#">Yds</a></th>
			<th><a title="Yards Per Game" onclick="this.blur(); return sortTable('offmain',4,true);" href="#">Yds/G</a></th>
			<th><a title="Total Rushing Yards" onclick="this.blur(); return sortTable('offmain',  5, true);" href="#">RuYds</a></th>
			<th><a title="Rushing Yards Per Game" onclick="this.blur(); return sortTable('offmain',  6, true);" href="#">RuYds/G</a></th>
			<th><a title="Total Passing Yards" onclick="this.blur(); return sortTable('offmain',  7, true);" href="#">PaYds</a></th>
			<th><a title="Passing Yards Per Game" onclick="this.blur(); return sortTable('offmain',  8, true);" href="#">PaYds/G</a></th>
			<th><a title="Total Points Scored" onclick="this.blur(); return sortTable('offmain',  9, true);" href="#">Pts</a></th>
			<th><a title="Points Per Game" onclick="this.blur(); return sortTable('offmain', 10, true);" href="#">Pts/G</a></th>
		</tr>
	</thead>
	<tbody id="offmain">
		<tr>
			<td></td>
			<td>atlanta</td>
			<td>16</td>
			<td>5070</td>
			<td>316.9</td>
			<td>1773</td>
			<td>110.8</td>
			<td>3297</td>
			<td>206.1</td>
			<td>291</td>
			<td>18.2</td>
		</tr>
		<tr class="alternaterow">
			<td></td>
			<td>baltimore</td>
			<td>16</td>
			<td>4773</td>
			<td>318.2</td>
			<td>1598</td>
			<td>106.5</td>
			<td>3175</td>
			<td>211.7</td>
			<td>284</td>
			<td>18.9</td>
		</tr>
		<tr>
			<td></td>
			<td>buffalo</td>
			<td>16</td>
			<td>5137</td>
			<td>321.1</td>
			<td>1686</td>
			<td>105.4</td>
			<td>3451</td>
			<td>215.7</td>
			<td>265</td>
			<td>16.6</td>
		</tr>
		<tr class="alternaterow">
			<td></td>
			<td>carolina</td>
			<td>16</td>
			<td>4254</td>
			<td>265.9</td>
			<td>1372</td>
			<td>85.8</td>
			<td>2882</td>
			<td>180.1</td>
			<td>253</td>
			<td>15.8</td>
		</tr>
		<tr>
			<td></td>
			<td>dallas</td>
			<td>16</td>
			<td>4402</td>
			<td>275.1</td>
			<td>2184</td>
			<td>136.5</td>
			<td>2218</td>
			<td>138.6</td>
			<td>246</td>
			<td>15.4</td>
		</tr>
		<tr class="alternaterow">
			<td></td>
			<td>denver</td>
			<td>16</td>
			<td>4817</td>
			<td>301.1</td>
			<td>1877</td>
			<td>117.3</td>
			<td>2940</td>
			<td>183.8</td>
			<td>340</td>
			<td>21.2</td>
		</tr>
		<tr>
			<td></td>
			<td>detroit</td>
			<td>16</td>
			<td>4994</td>
			<td>312.1</td>
			<td>1398</td>
			<td>87.4</td>
			<td>3596</td>
			<td>224.8</td>
			<td>270</td>
			<td>16.9</td>
		</tr>
	</tbody>
</table>


<script type="text/javascript">
function sortTable(id, col, rev){

	var tblEl = document.getElementById(id);
	
	if(tblEl.reverseSort == null){
		tblEl.reverseSort = new Array();
		tblEl.lastColumn = 1;
	}
	
	if(tblEl.reverseSort[col] == null)
		tblEl.reverseSort[col] = rev;
		
	if(col == tblEl.lastColumn)
		tblEl.reverseSort[col] = !tblEl.reverseSort[col];
		tblEl.lastColumn = col;
		var oldDsply = tblEl.style.display;
		tblEl.style.display = "none";
		var tmpEl;
		var i, j;
		var minVal, minIdx;
		var testVal;
		var cmp;
		
	for(i = 0; i < tblEl.rows.length - 1; i++){
		minIdx = i;
		minVal = getTextValue(tblEl.rows[i].cells[col]);
		
		for(j = i + 1; j < tblEl.rows.length; j++){
		
			testVal = getTextValue(tblEl.rows[j].cells[col]);
			cmp = compareValues(minVal, testVal);
			
			if(tblEl.reverseSort[col])
				cmp = -cmp;
			if (cmp == 0  &&  col != 1)
				cmp = compareValues(
					getTextValue(tblEl.rows[minIdx].cells[1]),
					getTextValue(tblEl.rows[j].cells[1])
				);
			if(cmp > 0){
				minIdx = j;
				minVal = testVal;
			}
		}
	
		if(minIdx > i){
			tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
			tblEl.insertBefore(tmpEl, tblEl.rows[i]);
		}
		
	}
	
	makePretty(tblEl, col);
	setRanks(tblEl, col, rev);
	tblEl.style.display = oldDsply;
	return false;
}

if(document.ELEMENT_NODE == null){
	document.ELEMENT_NODE = 1;
	document.TEXT_NODE = 3;
}

function getTextValue(el){
	var i;
	var s;
	s = "";
	for(i = 0; i < el.childNodes.length; i++)
	if(el.childNodes[i].nodeType == document.TEXT_NODE)
		s += el.childNodes[i].nodeValue;
	else if (el.childNodes[i].nodeType == document.ELEMENT_NODE && el.childNodes[i].tagName == "BR")
		s += " ";
	else s += getTextValue(el.childNodes[i]);
	return normalizeString(s);
}

function compareValues(v1, v2){
	var f1, f2;
	f1 = parseFloat(v1);
	f2 = parseFloat(v2);
	if(!isNaN(f1) && !isNaN(f2)){
		v1 = f1;
		v2 = f2;
	}
	if(v1 == v2)
		return 0;
	if(v1 > v2)
		return 1
		return -1;
}

var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");

function normalizeString(s){
	s = s.replace(whtSpMult, " "); 
	s = s.replace(whtSpEnds, ""); 
	return s;
}

var rowClsNm = "alternaterow";
var colClsNm = "sortedcolumn";
var rowTest = new RegExp(rowClsNm, "gi");
var colTest = new RegExp(colClsNm, "gi");

function makePretty(tblEl, col){
	var i, j;
	var rowEl, cellEl;
	for(i = 0; i < tblEl.rows.length; i++){
		rowEl = tblEl.rows[i];
		rowEl.className = rowEl.className.replace(rowTest, "");
		if(i % 2 != 0)
		rowEl.className += " " + rowClsNm;
		rowEl.className = normalizeString(rowEl.className);
	for (j = 2; j < tblEl.rows[i].cells.length; j++){
		cellEl = rowEl.cells[j];
		cellEl.className = cellEl.className.replace(colTest, "");
		if (j == col)
		cellEl.className += " " + colClsNm;
		cellEl.className = normalizeString(cellEl.className);
	}
}

var el = tblEl.parentNode.tHead;
rowEl = el.rows[el.rows.length - 1];

for(i = 2; i < rowEl.cells.length; i++){
	cellEl = rowEl.cells[i];
	cellEl.className = cellEl.className.replace(colTest, "");
	if(i == col)
		cellEl.className += " " + colClsNm;
		cellEl.className = normalizeString(cellEl.className);
	}
}

function setRanks(tblEl, col, rev){
	var i = 0;
	var incr = 1;
	if(tblEl.reverseSort[col])
	rev = !rev;
	if(rev){
		incr = -1;
		i = tblEl.rows.length - 1;
	}
	var count = 1;
	var rank = count;
	var curVal;
	var lastVal = null;
	
	while(col > 1  &&  i >= 0  &&  i < tblEl.rows.length){
		curVal = getTextValue(tblEl.rows[i].cells[col]);
		if(lastVal != null  &&  compareValues(curVal, lastVal) != 0)
		rank = count;
		tblEl.rows[i].rank = rank;
		lastVal = curVal;
		count++;
		i += incr;
	}
	
	var rowEl, cellEl;
	var lastRank = 0;

	for(i = 0; i < tblEl.rows.length; i++){
		rowEl = tblEl.rows[i];
		cellEl = rowEl.cells[0];
		while(cellEl.lastChild != null)
		cellEl.removeChild(cellEl.lastChild);
		if(col > 1  &&  rowEl.rank != lastRank){
			cellEl.appendChild(document.createTextNode(rowEl.rank));
			lastRank = rowEl.rank;
		}
	}
}
</script>
</body>
</html>